<template>
	<view class="wrap">
		<view class="cont">
			<img :src="img" alt="" @click="onupdateimg">
			<van-field v-model="name" type="tel" label="昵称" placeholder="请输入昵称" />
			<van-field name="radio" label="性别">
				<template #input>
					<van-radio-group v-model="checked1" direction="horizontal">
						<van-radio name="1" checked-color="#fbc117">男生</van-radio>
						<van-radio name="2" checked-color="#fbc117">女生</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field v-model="address" is-link readonly name="area" label="所在省市区" placeholder="点击选择省市区"
				@click="showArea = true" />
			<van-popup v-model:show="showArea" position="bottom">
				<van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
			</van-popup>
			<van-field v-model="selftag" is-link readonly name="picker" label="个人标签" placeholder="请选择"
				@click="showPicker1 = true" />
			<van-popup v-model:show="showPicker1" position="bottom">
				<van-picker :columns="selftags" @confirm="onConfirm1" @cancel="showPicker1 = false" />
			</van-popup>
			<van-cell-group inset style="width: 100vw;">
				<text style="font-size: 28rpx;line-height: 80rpx;">我的简介</text>
				<van-field v-model="message" rows="2" autosize type="textarea" maxlength="50"
					placeholder="请简单介绍一下自己吧~~~" show-word-limit style="background-color:#f8f8f8;" />
			</van-cell-group>
		</view>
		<view class="btn">
			<van-button round color="#Fe9b23" style="width: 92vw;height: 36px;font-size: 36rpx;"
				@click="updateuserinfo()">保存</van-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import $http from '../../request/index.js'
	import {
		showSuccessToast,
		showFailToast
	} from 'vant'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	const store = useStore()

	let name = ref('') //名字
	let checked1 = ref('1') //性别
	let message = ref('') //简介
	let img = ref('../../static/logo.png') //头像

	let selftag = ref('');
	let selftagval = ref('') //个人标签
	let showPicker1 = ref(false);
	let selftags = [{
			text: '暂无',
			value: '1'
		},
		{
			text: '爱心人士',
			value: '2'
		},
		{
			text: '资深救助人',
			value: '3'
		},
		{
			text: '救助站管理员',
			value: '4'
		}
	];
	let onConfirm1 = ({ //个人标签
		selectedOptions
	}) => {
		selftag.value = selectedOptions[0]?.text;
		selftagval.value = selectedOptions[0]?.value;
		showPicker1.value = false;
	};
	// 省市区
	import {
		areaList
	} from '@vant/area-data';
	const address = ref(''); //地址
	const showArea = ref(false);
	const onConfirm = ({
		selectedOptions
	}) => {
		showArea.value = false;
		address.value = selectedOptions.map((item) => item.text).join('/')
	};

	function onupdateimg() { //点击上传图片
		console.log('上传图片')
		uni.chooseImage({
			count: 1,
			success: res => {
				let file1 = res.tempFiles[0]
				console.log(file1)
				uni.uploadFile({
					url: '/api/uploadAvatar',
					name: 'file',
					file: file1,
					header: {
						'token': uni.getStorageSync('token')
					},
					success: res => {
						res = JSON.parse(res.data)
						console.log(res)
						img.value = res.data
						let data = computed(() => store.state.userinfo)
						data.value.userAvatar = res.data
						console.log(data.value)
						store.commit('uploadUserinfo', data)
					}
				})
			}
		})
	}

	function updateuserinfo() { //点击保存，修改登录的用户信息
		let data = {
			userSex: checked1.value, //性别
			userName: name.value, //姓名
			userInfo: message.value, //简介
			userAddress: address.value.replace(/\//g, ''), //所在城市
			userTag: selftagval.value, //标签
			userAvatar: img.value //用户头像
		}
		console.log(data)
		$http.post('/user/updateinfo', data).then(res => {
			console.log(res)
			let {
				code,
				msg,
				data
			} = res
			if (!code) {
				store.commit('uploadUserinfo', data)
				showSuccessToast(msg)
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} else {
				showFailToast(msg)
			}
		})
	}
	onShow(() => {
		let login = computed(() => store.state.login)
		if (login.value) {
			let data = computed(() => store.state.userinfo)
			console.log(data.value)
			img.value = data.value.userAvatar
			name.value = data.value.userName
		}
	})
</script>

<style scoped>
	.btn {
		width: 100vw;
		position: absolute;
		left: 0;
		bottom: 0;
		border-top: 1px solid gray;
		height: 50px;
		padding: 14rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.wrap {
		width: 100vw;
		height: calc(100vh - 44px);
	}

	img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		margin: 40rpx 0 40rpx
	}

	.cont {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
</style>